<!-- 考试发布组件 -->
<template>
  <div class="release">
    <div class="top-btn">
      <el-button type="primary" class="add" @click="addExam">新增考试</el-button>
      <el-button type="danger" :plain="true" class="del" @click="delClick(tableData.filter( i => i.flag).length)">删除</el-button>
      <el-button type="text" class="mes" @click="openMes"><el-button type="primary">报名信息</el-button></el-button>
    </div>
    <!-- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="100"> </el-table-column>
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="name" label="名称" width="220"> </el-table-column>
      <el-table-column prop="type" label="类别" width="220"></el-table-column>
      <el-table-column prop="oriented" label="面向对象" width="220"></el-table-column>
      <el-table-column prop="limit" label="限制对象" width="220"></el-table-column>
      <el-table-column prop="" label="报名时间" width="240"></el-table-column>
      <el-table-column label="操作" width="220"><el-button type="warning">编辑</el-button></el-table-column>
    </el-table> -->
    <table>
        <thead>
            <th style="width:120px;"><input type="checkbox" :disabled="tableData.length < 1" v-model="allSelect" @click="selectAll"></th>
            <th style="width:140px;">序号</th>
            <th style="width:240px;">名称</th>
            <th style="width:240px;">类别</th>
            <th style="width:240px;">面向对象</th>
            <th style="width:240px;">限制对象</th>
            <th style="width:240px;">报名时间</th>
            <th style="width:240px;">操作</th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in tableData" :key="index">
                <td><input type="checkbox" @click="selectChange" v-model="item.flag"></td>
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.oriented }}</td>
                <td>{{ item.limit }}</td>
                <td>{{ item | applyDate }}</td>
                <td><el-button  @click="handleEdit(item,index)" type="warning">编辑</el-button></td>
            </tr>
        </tbody>
    </table>
    <div class="none" v-if="!tableData.length">暂无考试信息</div>
    <div class="mask" :class="{show:isShow}"></div>
   <div class="add-exam" :class="{show:isShow}">
      <h3>新建考试</h3>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="new-exam">
        <el-form-item label="名称" prop="name" class="item">
            <el-input v-model="form.name" class="inp"></el-input>
        </el-form-item>
         <el-form-item label="类别"  class="item">
            <el-input v-model="form.type"  class="inp"></el-input>
        </el-form-item>
         <el-form-item label="面向对象" prop="oriented" class="item">
            <el-input v-model="form.oriented"  class="inp"></el-input>
        </el-form-item>
        <el-form-item label="限制对象"  class="item">
            <el-input v-model="form.limit"  class="inp"></el-input>
        </el-form-item>
        <el-form-item label="报名时间"  class="item">
            <el-col :span="11">
            <el-date-picker type="date" placeholder="报名开始日期" value-format="yyyy-MM-dd" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
            <el-date-picker type="date" placeholder="报名结束日期" value-format="yyyy-MM-dd" v-model="form.date2" style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="报名须知"  prop="notice" class="item">
            <el-input type="textarea"  class="inp" v-model="form.notice"></el-input>
        </el-form-item>
        <el-form-item label="备注"  class="item">
            <el-input  class="inp" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="考试费用"  class="item">
            <el-input  class="inp" v-model="form.cost"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :plain="true" class="save" @click="save">保存</el-button>
            <el-button class="cancel" @click="close">取消</el-button>
        </el-form-item>
    </el-form>
   </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        tableData: [
            {
                date1: '2020-09-02',
                date2: '2020-09-10',
                name: '国家计算机二级考试',
                type:'Access',
                oriented:'中二|中三',
                limit:'中一',
                notice:``,
                remark:'',
                cost:'',
                flag:false
            },
            {
                date1: '2020-09-10',
                date2: '2020-09-18',
                name: '国家英语等级考试',
                type:'Access',
                oriented:'中二|中三',
                limit:'中一',
                notice:``,
                remark:'',
                cost:'',
                flag:false
            }
        ],
        form: {
                date1: '',//开始时间
                date2: '', //结束时间
                name: '',
                type:'',
                oriented:'',
                limit:'',
                notice:'',
                remark:'',
                cost:''
        },
        text:`1. 中小学教师；
2. 中等师范学校教师和高等院校文科教师；
3. 师范院bai校毕业生（高等师范里，首先是文科类毕业生）；
4. 广播、电视、电影、戏剧，以及外语、旅游等高等院校和中等职业学校相关专业的教师和毕业生；
5. 各级广播电台、电视台的播音员、节目主持人；
6. 从事电影、电视剧、话剧表演和影视配音的专业人员；
7. 其他应当接受普通话水平测试的人员和自愿接受普通话水平测试的人员。`,
        rules:{
          name:[{required: true,message: "考试名称不能为空",trigger: "blur"}],         
          oriented:[{required: true,message: "面向对象不能为空",trigger: "blur"}], 
        //   date:[{required: true,message: "时间不能为空",trigger: "blur"}],
          notice:[{required: true,message: "报名须知不能为空",trigger: "blur"}]
        },
        isShow:false,
        allSelect:false,
        isEdit:false,
        editIndex:NaN
    };
  },
  //监听属性 类似于data概念
  computed: {
  },
  filters:{
      applyDate(item){
          return item.date1 + "---" + item.date2;
      }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
       handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      openMes() {
        this.$alert(`<div class="model">
        <table>
            <thead>
                <th>排序</th>
                <th>信息项名称</th>
                <th>输入框类型</th>
                <th>是否必填项</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>学生姓名</td>
                    <td>单文本框</td>
                    <td>必填</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>性别</td>
                    <td>下拉框</td>
                    <td>必填</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>出生日期</td>
                    <td>单行文本</td>
                    <td>必填</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>身份证号</td>
                    <td>单行文本</td>
                    <td>必填</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>籍贯</td>
                    <td>单行文本</td>
                    <td>必填</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>民族</td>
                    <td>下拉框</td>
                    <td>必填</td>
                </tr>
            </tbody>
        </table>
    </div>`, '报名信息', {
          dangerouslyUseHTMLString: true
        });
      },
     //模态框的显示隐藏   
      addExam(){
          this.form.notice = this.text;
          this.isShow = true;
      },
      //关闭模态框
      close(){
          this.isShow = false;
          for(let key in this.form){
              this.form[key] = '';
          }
      },
      //发布考试
      save(){
          const obj = {};
          for(let key in this.form){
              obj[key] = this.form[key];
              this.form[key] = '';
          }
          obj.flag = false;
        //   console.log(obj.date1,obj.date2);
          if(this.isEdit){
            // 此处为修改
              this.tableData[this.editIndex] = obj;
              this.isEdit = false;
              this.isShow = false;
              this.$http.post('/sendtestmes',{
                exams:this.tableData
              }).then( res => {
                if(res.data.code == 1){
                    this.$message({
                        message: '修改考试成功',
                        type: 'success'
                    });
                }
             })
          }else{
            if(obj.name){
            //  此处为发布新的
              this.tableData.push(obj);
              this.isShow = false;
              this.$http.post('/sendtestmes',{
                exams:this.tableData
               }).then( res => {
                    if(res.data.code == 1){
                        this.$message({
                            message: '发布考试成功',
                            type: 'success'
                        });
                    }
                })
            }
          }
      },
      //删除选中项
      delClick(length){
        //   console.log(111);
        if(length){
            this.tableData = this.tableData.filter( item => !item.flag);
            if(this.tableData.length == 0){
                this.allSelect = false;
            }
            this.$http.post('/sendtestmes',{
                exams:this.tableData
            }).then( res => {
                if(res.data.code == 1){
                    this.$message({
                        message: '删除考试成功',
                        type: 'success'
                    });
                }
            })
        }
        
      },
      //全选
      selectAll(){
          this.allSelect = !this.allSelect;
          this.tableData.forEach(element => {
              element.flag = this.allSelect;
          });
      },
      //检查点击该项后有没有全选中
      selectChange(){
        const that = this;
         setTimeout(function(){
            for(let i =0;i<that.tableData.length;i++){
                if(!that.tableData[i].flag){
                    that.allSelect = false;
                    return;
                }
            }
            that.allSelect = true;
         },1)
      },
     //编辑
     handleEdit(item,index){
         this.isEdit = true;
         this.editIndex = index;
         for(let key in item){
             this.form[key] = item[key];
         }
         this.form.notice = this.text;
         this.isShow = true;
     }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.release {
  width: 100%;
  margin: 0 auto;
  .top-btn {
    height: 60px;
    // background: red;
    // padding-top: 10px;
    .add {
      float: right;
      margin-top: 13px;
      margin-right: 40px;
    }
    .del {
      float: right;
      margin-right: 25px;
      margin-top: 13px;
    }
    .mes {
      float: right;
      margin-right: 35px;
    }
  }
  .none{
      width: 100%;
      color: #606266;
      font-size: 20px;
      font-style: italic;
      line-height: 60px;
      text-align: center;
      height: 60px;
      border-bottom: 1px solid #EBEEF5;
  }
  table{
      width: 100%;
      thead{
          height: 54px;
          line-height: 54px;
          
          th{
              text-align: center;
              color: #909399;
              font-size: 14px;
              border-bottom: 1px solid #EBEEF5;
          }
      }
      tbody{
          tr{
              height: 54px;
              line-height: 54px;
              text-align: center;
              td{
                  color: #606266;
                  font-size: 14px;
                  border-bottom: 1px solid #EBEEF5;
              }
          }
      }
  }
  .mask{
      display: none;
      z-index: 9;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,0.5);
  }
  .add-exam{
      display: none;
      z-index: 10;
      width: 620px;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      height: 690px;
      background-color: #e9eef3;
      border: 1px solid rgb(121, 121, 121);
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 0.35) 5px 5px 5px;
      h3{
          height: 42px;
          line-height: 42px;
          padding-left: 15px;
          border-bottom: 1px solid rgb(121, 121, 121);
      }
      .new-exam{
          padding: 40px 0 0 60px;
          .item{
              font-size: 18px;
              color: #333;
              margin-bottom: 20px;
              .inp{
                  width: 300px;
                  .el-textarea__inner{ //el_input中的隐藏属性
                     resize: none!important;  //主要是这个样式
                  }
              }
              .line{
                  width: 10px;
                  margin: 0 10px;
              }
          }
          .save{
              margin: 0 40px;
          }
      }
  }
  .show{
      display: block;
  }
}
</style>
<style lang="less">
.model{
      table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            text-align: center;
            border: 1px solid #e9e9e9;
        }
        th{
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
  }
</style>